<template>
	<div class="users-container">
		<el-tabs v-model="activeName"
			@tab-click="handleClick">
			<el-tab-pane label="用户管理"
				name="users">
				<el-table :data="users"
					v-loading="loading">
					<el-table-column align="center"
						label="unid"
						prop="unid"></el-table-column>
					<el-table-column align="center"
						label="用户名"
						prop="username"></el-table-column>
					<el-table-column align="center"
						label="昵称"
						prop="nickname"></el-table-column>
					<el-table-column align="center"
						label="vip等级"
						prop="vipLevel"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" >编辑</el-button>
              <el-button type="danger" >删除</el-button>
            </el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="配置管理"
				name="roles">角色管理</el-tab-pane>
        
		</el-tabs>
	</div>
</template>
<script>
	import * as api from "../../../api"
	export default {
		data() {
			return {
				activeName: "users",
				loading: true,
				users: []
			}
		},
		created() {
			api.getAllUsersApi()
				.then(res => {
					this.loading = false;
					this.users = res.data.data
				})
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		}
	}
</script>